<template>
  <div class="app-container">
    <div class="head_search u-f u-f-ac u-fw" v-if="memusid!=5">
      <div class="select_box u-f u-f-ac">
        <p class="label font14 text_black agency_name">{{ $t("代理状态") }}：</p>
        <el-select v-model="clientVal" :placeholder="$t('代理状态')" @change="clientChange">
          <el-option
            v-for="item in clientArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="ipt_box u-f u-f-ac" style="width: 290px;">
        <p class="label font14 text_black agency_name">{{ $t("代理商名称") }}：</p>
        <el-input v-model="agent" :placeholder="$t('请输入代理商名字')"></el-input>
      </div>
      <div class="ipt_box u-f u-f-ac">
        <p class="label font14 text_black">{{ $t("手机号") }}：</p>
        <el-input v-model="phone" :placeholder="$t('请输入代理手机号')"></el-input>
      </div>
      <button class="sub_btn font14 text_white bg_blue" @click="getData('search')">{{ $t("提交") }}</button>
    </div>

    <div class="head_options u-f u-f-ac u-fw">
      <button
        class="sub_btn font14 text_white bg_blue"
        @click="addAgent"
        v-if="permissions.indexOf('/agency/agencyAdd') != -1"
      >{{ $t("添加代理商") }}</button>
    </div>

    <div>
      <el-table :data="tableData">
        <el-table-column prop="name" :label="$t('代理商名称')"></el-table-column>
        <el-table-column prop="phone" :label="$t('手机号码')" width="120"></el-table-column>
        <el-table-column prop="brokerage" :label="$t('佣金比例')">
          <template slot-scope="{ row }">
            <span>{{ row.brokerage }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" :label="$t('用户状态')"></el-table-column>
        <el-table-column prop="open_lock" :label="$t('是否可开锁')">
          <template slot-scope="{ row }">
            <span v-if="row.open_lock == 0">{{ $t("否") }}</span>
            <span v-if="row.open_lock == 1">{{ $t("是") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="is_withdraw" :label="$t('是否允许提现')">
          <template slot-scope="{ row }">
            <span v-if="row.is_withdraw == 0">{{ $t("否") }}</span>
            <span v-if="row.is_withdraw == 1">{{ $t("是") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="is_withdraw" :label="$t('是否允许秒提')">
          <template slot-scope="{ row }">
            <span v-if="row.m_withdraw == 0">{{ $t("否") }}</span>
            <span v-if="row.m_withdraw == 1">{{ $t("是") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="is_self" :label="$t('代理模式')">
          <template slot-scope="{ row }">
            <span v-if="row.is_self == 0">{{ $t("投放") }}</span>
            <span v-if="row.is_self == 1">{{ $t("购买") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="parent_name" :label="$t('上级代理')"></el-table-column>
        <el-table-column prop="withdraw" :label="$t('操作')" width="200" fixed="right">
          <template slot-scope="scope">
            <div class="options_box">
              <el-button
                v-if="permissions.indexOf('/agency/agencyEdit') != -1"
                size="mini"
                type="primary"
                style="margin-right: 15px;margin-bottom: 10px;"
                @click="updateAgent(scope.row)"
              >{{ $t("修改") }}</el-button>
              <el-button
                size="mini"
                type="primary"
                style="margin-bottom: 10px;"
                @click="hasDevice(scope.row)"
              >{{ $t("所属设备") }}</el-button>
              <el-button size="mini" type="success" style="margin-right: 15px;" @click="statistics(scope.row)">{{ $t("统计") }}</el-button>
              
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                v-if="permissions.indexOf('/agency/agencyDelete') != -1"
              >{{ $t("删除") }}</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination_box">
        <el-pagination
          background
          
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="page_size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <!-- 修改和添加 -->
    <el-dialog
      :title="isUpdate ? $t('修改代理商') : $t('添加代理商')"
      width="900px"
      :visible.sync="showAddDialog"
      :close-on-click-modal="false"
    >
      <div class="order_detail">
        <div class="ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('代理商名称')}}：</span>
          <el-input v-model="addFrom.agent" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('代理商手机')}}：</span>
          <el-input v-model="addFrom.phone" :placeholder="$t('请输入')"></el-input>
          <span class="tip font14 text_danger">{{$t('用于登录APP或小程序代理端')}}</span>
        </div>
        <div class="ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('登陆密码')}}：</span>
          <el-input v-model="addFrom.password" show-password :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="radio_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('代理模式')}}：</span>
          <el-radio v-model="addFrom.is_self" :label="1">{{$t('购买设备')}}</el-radio>
          <el-radio v-model="addFrom.is_self" :label="0">{{$t('投放设备')}}</el-radio>
        </div>
        <div class="div_box u-f u-f-ac">
          <p class="lable font14 text_black">{{$t('所属代理')}}：</p>
          <div class="content font14 text_black u-f u-f-ac" @click="openAgentList">
            <p class="text-ellipsis">{{ addFrom.top_agent ? addFrom.top_agent : $t('平台自营') }}</p>
          </div>
          <button class="btn font14 text_white bg_danger" @click="clearAgent">{{$t('清除')}}</button>
        </div>

        <div class="ipt_list u-f u-f-ac" v-if="addFrom.parent_id == '' && memusid != 5">
          <span class="lable font14 text_black">{{$t('创建几级代理')}}：</span>
          <!-- <div class="content font14 text_black u-f u-f-ac"> -->
            <el-input v-model="addFrom.restricted" :placeholder="$t('请输入')"></el-input>
            <!-- <p class="text-ellipsis">{{ addFrom.top_agent ? addFrom.top_agent : $t('平台自营') }}</p> -->
          <!-- </div> -->
          <span
            class="tip font14 text_danger"
          >设置为1为只允许当前代理设置为2为两级代理</span>
        </div>


        <div class="ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('佣金百分比')}}：</span>
          <el-input v-model="addFrom.brokerage" :placeholder="$t('请输入')"></el-input>
          <span
            class="tip font14 text_danger"
          >{{$t('必须小于所属代理商分成比')}}（100）{{$t('的整数')}},{{$t('单位')}}%</span>
        </div>
        <div class="radio_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('可打开机柜')}}：</span>
          <el-radio v-model="addFrom.open_lock" :label="1">{{$t('是')}}</el-radio>
          <el-radio v-model="addFrom.open_lock" :label="0">{{$t('否')}}</el-radio>
        </div>
        <div class="radio_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('是否允许提现')}}：</span>
          <el-radio v-model="addFrom.is_withdraw" :label="1">{{$t('是')}}</el-radio>
          <el-radio v-model="addFrom.is_withdraw" :label="0">{{$t('否')}}</el-radio>
        </div>
        <div class="radio_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('是否允许秒提')}}：</span>
          <el-radio v-model="addFrom.m_withdraw" :label="1">{{$t('是')}}</el-radio>
          <el-radio v-model="addFrom.m_withdraw" :label="0">{{$t('否')}}</el-radio>
        </div>
        <div class="radio_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('状态')}}：</span>
          <el-radio v-model="addFrom.status" :label="1">{{$t('正常')}}</el-radio>
          <el-radio v-model="addFrom.status" :label="2">{{$t('禁用')}}</el-radio>
        </div>
        <div class="radio_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('是否自定义价格')}}：</span>
          <el-radio v-model="addFrom.auth" :label="1">{{$t('是')}}</el-radio>
          <el-radio v-model="addFrom.auth" :label="0">{{$t('否')}}</el-radio>
        </div>
        <!-- <div class="ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('增值利润比例')}}：</span>
          <el-input v-model="addFrom.profits_rate" :placeholder="$t('请输入')"></el-input>
        </div> -->

        <el-button type="primary" v-if="!isUpdate" @click="addSubmit">{{$t('提交')}}</el-button>
        <el-button type="primary" v-if="isUpdate" @click="updateSubmit">{{$t('提交')}}</el-button>
      </div>
    </el-dialog>

    <agent-list ref="agentList" :memusid="memusid" :uid="uid" @hide="closeAgentList"></agent-list>


    <agent-stat ref="agentStat"></agent-stat>
    <device-list ref="deviceList"></device-list>
    <refresh @click="handleRefresh"></refresh>
  </div>
</template>

<script>
import agentList from "components/agent-list/agent-list.vue";
import agentStat from "components/stat/agent-stat.vue";
import deviceList from "components/device-list/device-list.vue";
import { mapState } from "vuex";
import util from "@/assets/js/util.js";
export default {
  name: "agency-agencyList",
  data() {
    let that = this;
    return {
      page: 1,
      page_size: 20,
      total: 0,
      agent: "",
      phone: "",
      isUpdate: false,
      showAddDialog: false,
      clientVal: 0,
      clientArr: [
        {
          value: 0,
          label: that.$t("代理状态")
        },
        {
          value: 1,
          label: that.$t("正常")
        },
        {
          value: 2,
          label: that.$t("禁用")
        }
      ],
      tableData: [],
      addFrom: {
        agent_id: "",
        agent: "",
        phone: "",
        password: "",
        is_self: 0,
        open_lock: 1,
        is_withdraw: 1,
        m_withdraw:0,
        status: 1,
        parent_id: "",
        top_agent: "",
        brokerage: "",
        restricted: "",
        profits_rate: '100',
        auth: 0
      },
    };
  },
  mounted() {
    this.getData();
    if(this.memusid==5){
      this.addFrom.agent_id = this.uid;
      
      this.addFrom.parent_id = this.uid;
      this.addFrom.agent = this.name;
      this.addFrom.top_agent = this.name;
    }
    
  },
  computed: {
    ...mapState(["permissions", 'equipmentModel', "memusid", "uid", "name"])
  },
  components: {
    agentList,
    agentStat,
    deviceList
  },
  methods: {
    handleRefresh() {
      this.page = 1
      this.page_size = 20
      this.agent = ''
      this.phone = ''
      this.clientVal = 0
      this.getData()
    },
    getData(type) {
      if(type == 'search') { this.page = 1 }
      if(this.memusid==5){
        util
        .$http("/agency/agencyDialog1?page=" + this.page, {
          page_size: this.page_size,
          name: this.agent,
          phone: this.phone,
          status: this.clientVal,
          uid: this.uid
        })
        .then(res => {
          if (res.code == 1) {
            this.total = res.data.total;
            this.tableData = res.data.list;
          }
        });
      }else{
        util
        .$http("/agency/agencyDialog?page=" + this.page, {
          page_size: this.page_size,
          name: this.agent,
          phone: this.phone,
          status: this.clientVal
        })
        .then(res => {
          if (res.code == 1) {
            this.total = res.data.total;
            this.tableData = res.data.list;
          }
        });
      }
      
    },
    addAgent() {
      if(this.memusid==5){
        this.addFrom = {
          agent_id: this.uid,
          agent: this.name,
          phone: "",
          password: "",
          is_self: 0,
          open_lock: 1,
          is_withdraw: 1,
          m_withdraw:0,
          status: 1,
          parent_id: this.uid,
          top_agent: this.name,
          brokerage: "",
          restricted: "",
          profits_rate: '100',
          auth:0,
        };
      }else{
        this.addFrom = {
          agent_id: "",
          agent: "",
          phone: "",
          password: "",
          is_self: 0,
          open_lock: 1,
          is_withdraw: 1,
          m_withdraw:0,
          status: 1,
          parent_id: "",
          top_agent: "",
          brokerage: "",
          restricted: "",
          profits_rate: '100',
          auth:0,
        };        
      }
      
      this.isUpdate = false;
      this.showAddDialog = true;
    },
    openAgentList() {
      this.$refs.agentList.show();
    },
    closeAgentList(data) {
      this.addFrom.top_agent = data.name;
      this.addFrom.parent_id = data.id;
    },
    clearAgent() {
      this.addFrom.parent_id = "";
      this.addFrom.top_agent = "";
      if(this.memusid == 5){
        this.addFrom.parent_id = this.uid;
        this.addFrom.top_agent = this.name;
      }
    },
    clientChange(val) {
      this.clientVal = val;
    },
    handleCurrentChange(val) {
      this.page = Number(val);
      this.getData();
    },
    updateAgent(row) {
      this.isUpdate = true;
      this.showAddDialog = true;
      setTimeout(() => {
        util
        .$http("/agency/agencyDetail", {
          id: row.id
        })
        .then(res => {
          if (res.code == 1) {
            this.addFrom = {
              agent_id: res.data.id,
              agent: res.data.name,
              phone: res.data.phone,
              password: "",
              is_self: Number(res.data.is_self),
              open_lock: Number(res.data.open_lock),
              is_withdraw: Number(res.data.is_withdraw),
              m_withdraw: Number(res.data.m_withdraw),
              status: Number(res.data.status),
              parent_id: res.data.parent_id,
              top_agent: res.data.parent_name,
              brokerage: res.data.brokerage,
              restricted: res.data.restricted,
              profits_rate: res.data.profits_rate,
              auth: res.data.auth
            };
          }
        });
      }, 150);
    },
    statistics(row) {
      this.$refs.agentStat.show(row.id)
    },
    hasDevice(row) {
      this.$refs.deviceList.show(row.id)
    },
    handleDelete(row) {
      this.$confirm(this.$t("是否要删除当前代理"))
        .then(() => {
          util
            .$http("/agency/agencyDelete", {
              id: row.id
            })
            .then(res => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.getData();
              }
            });
        })
        .catch(() => {});
    },
    addSubmit() {
      // console.log(this.addFrom.parent_id);
      // console.log("肿么啦")
      // return false;
      util
        .$http("/agency/agencyAdd", {
          name: this.addFrom.agent,
          phone: this.addFrom.phone,
          password: this.addFrom.password,
          is_self: this.addFrom.is_self,
          parent_id: this.addFrom.parent_id,
          parent_name: this.addFrom.top_agent,
          brokerage: this.addFrom.brokerage,
          restricted: this.addFrom.restricted,
          open_lock: this.addFrom.open_lock,
          is_withdraw: this.addFrom.is_withdraw,
          m_withdraw: this.addFrom.m_withdraw,
          status: this.addFrom.status,
          profits_rate: this.addFrom.profits_rate,
          auth:this.addFrom.auth,
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.isUpdate = false;
            this.showAddDialog = false;
            this.addFrom = {
              agent_id: "",
              agent: "",
              phone: "",
              password: "",
              is_self: 0,
              open_lock: 1,
              is_withdraw: 1,
              m_withdraw:0,
              status: 1,
              parent_id: "",
              top_agent: "",
              brokerage: "",
              restricted: "",
              profits_rate: '100',
              auth:0,
            };
            this.getData();
          }
        });
    },
    updateSubmit() {
      util
        .$http("/agency/agencyEdit", {
          id: this.addFrom.agent_id,
          name: this.addFrom.agent,
          phone: this.addFrom.phone,
          password: this.addFrom.password,
          is_self: this.addFrom.is_self,
          parent_id: this.addFrom.parent_id,
          parent_name: this.addFrom.top_agent,
          brokerage: this.addFrom.brokerage,
          restricted: this.addFrom.restricted,
          open_lock: this.addFrom.open_lock,
          is_withdraw: this.addFrom.is_withdraw,
          m_withdraw: this.addFrom.m_withdraw,
          status: this.addFrom.status,
          profits_rate: this.addFrom.profits_rate,
          auth:this.addFrom.auth
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.isUpdate = false;
            this.showAddDialog = false;
            this.addFrom = {
              agent_id: "",
              agent: "",
              phone: "",
              password: "",
              is_self: 0,
              open_lock: 1,
              is_withdraw: 1,
              m_withdraw: 0,
              status: 1,
              parent_id: "",
              top_agent: "",
              brokerage: "",
              restricted: "",
              profits_rate: '100',
              auth:0
            };
            this.getData();
          }
        });
    }
  }
};
</script>

<style scoped>
.head_search {
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  width: 280px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .div_box {
  width: 320px;
  margin-right: 20px;
}
.head_search .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.head_search .div_box .content:active {
  border-color: #409eff;
}
.head_search .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}
.head_search .sub_btn {
  height: 40px;
  border: 0;
  outline: 0;
  padding: 0 21px;
  cursor: pointer;
  border-radius: 4px;
}
.head_tip {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}
.head_options .sub_btn {
  height: 34px;
  border: 0;
  outline: 0;
  padding: 0 15px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
}
.options_box .el-button {
  margin: 0;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.order_detail {
  padding-left: 50px;
}
.order_detail .ipt_list {
  margin-bottom: 20px;
}
.order_detail .ipt_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .ipt_list .el-input {
  width: 170px;
}
.order_detail .el-input .el-input__inner {
  height: 36px;
  line-height: 36px;
}
.order_detail .ipt_list .tip {
  width: 350px;
  margin: 0 0 0 15px;
}
.order_detail .select_box {
  margin-bottom: 20px;
}
.order_detail .select_box .lable {
  width: 100px;
  margin: 0;
}
.order_detail .select_box .el-select {
  width: 170px;
}
.order_detail .radio_list {
  margin-bottom: 20px;
}
.order_detail .radio_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .div_box {
  margin-bottom: 20px;
}
.order_detail .div_box .lable {
  width: 100px;
  margin: 0;
}
.order_detail .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.order_detail .div_box .content:active {
  border-color: #409eff;
}
.order_detail .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
.order_detail .sub_btn {
  height: 40px;
  border: 0;
  outline: 0;
  padding: 0 25px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
  margin-left: 100px;
  margin-top: 20px;
}
</style>
